<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
    </div>
</body>
<script type="module">
    // 整体载入  => 查看模块内暴露的变量和方法
    import * as Vue from "../js/vue.esm-browser.js";
    console.log(Vue);

    // 按需引入
    import { createApp, ref, reactive, computed, watch, watchEffect,readonly } from "../js/vue.esm-browser.js";
    import { toRef ,isRef,isReactive,isReadonly,isProxy} from "../js/vue.esm-browser.js";
    import { unref,toRaw,markRaw} from "../js/vue.esm-browser.js";
    import {  onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "../js/vue.esm-browser.js";


    // 组合式写法 可以理解为是选项式语法的优化, 但是最终还是会被解析成选项式语法
    // 在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性
    let app = createApp({
        setup() {


            /* 
                unref()  返回ref对象的内部值(.value),如果传入的参数不是ref对象,直接返回原值
                    isRef(arg) ? arg.value : arg;


                toRaw()  根据一个Vue创建的proxy代理对象(reactive,shallowReactive, readonly shallowReadonly)返回其原始对象。


                markRaw()​
                将一个对象标记为不可被转为代理。返回该对象本身。
            
            */

            // let zhangRaw = {name:"张三",age:18};
            // let zhang = reactive(zhangRaw);

            // console.log(zhangRaw);
            // console.log(zhang);



            // let zhangRaw = markRaw({name:"张三",age:18}); // 将一个对象标记为不可被转为代理。返回该对象本身。
            // let zhang = reactive(zhangRaw); //reactive()转化过程中发现对象存在属性 __v_skip ,不会将其转化为代理对象 而是返回原值 
            // console.log(zhangRaw);
            // console.log(zhang);
         
       

            return {
            }
        },

        // 声明周期钩子选项式写法
        mounted() {
            console.log("mounted1", this);
        },
        mounted() {
            console.log("mounted2", this);
        },
    })

    app.mount("#app");
</script>

</html>